// *******************************************************************************************************
// # 汎用モジュール
// *******************************************************************************************************

// 汎用モジュール
//
// #### export to common.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// 汎用モジュール
//
// Styleguide 4.0

/* ------------------------------------
	* 汎用モジュール
* ------------------------------------ */


// 白背景角丸
//
// .mod_box_section - sample
//
// Markup:
// <div class="mod_box_section">
// <p>hogehoge</p>
// </div>
//
// Styleguide 4.1

/* --------------------------
	* mod_box_section
* -------------------------- */
.mod_box_section {
	margin: 20px 0;
	padding: 30px;
	@include border-radius($radius);
	background-color: #fff;
}


// 白背景角丸：上にボーダーあり
//
// .mod_box_section_bdt - sample
//
// Markup:
// <div class="mod_box_section_bdt">
// <p>hogehoge</p>
// </div>
//
// Styleguide 4.2

/* --------------------------
	* mod_box_section_bdt
* -------------------------- */
.mod_box_section_bdt {
	margin-top: 30px;
	padding: 20px;
	padding-top: 30px;
	border-top: 4px solid $borderColorBlue;
	@include border-bottom-right-radius($radius);
	@include border-bottom-left-radius($radius);
	position: relative;
	background-color: #fff;
	zoom: 1;
}


// 白背景角丸：上下左右ボーダーあり
//
// .mod_box_section_bd_all - sample
//
// Markup:
// <div class="mod_box_section_bd_all">
// <p>hogehoge</p>
// </div>
//
// Styleguide 4.3

/* --------------------------
	* mod_box_section_bd_all
* -------------------------- */
.mod_box_section_bd_all {
	margin-top: 30px;
	padding: 18px;
	padding-top: 20px;
	border: 2px solid $borderColorBlue;
	border-top: 8px solid $borderColorBlue;
	@include border-bottom-right-radius($radius);
	@include border-bottom-left-radius($radius);
	position: relative;
	background-color: #fff;
	zoom: 1;
}


// タブ付き物件情報のボックス→最近見た物件、検討リスト、問い合わせなど
//
// このページではブラウザ幅が狭いとカラム落ちしますが、実際は問題ありません。
//
// .mod_box_section_bd_all.mod_box_tab_room - sample
//
// Markup:
// <article class="mod_box_section_bd_all mod_box_tab_room">
// <p class="txt_type"><span>マンション</span></p>
// <div class="box_head_tab_room">
// <a href="#dummy" target="_blank">
// <div class="box_info">
// <h2 class="name">フラット代々木上原</h2>
// <p class="info">
// <span>00階建て</span>
// <span>築23年</span>
// </p>
// <div class="box_access">
// <h3 class="ttl_info">交通</h3>
// <ul class="list_access">
// <li>小田急線 代々木八幡駅から徒歩6分</li>
// </ul>
// </div>
// <div class="box_address">
// <h3 class="ttl_info">所在地</h3>
// <p class="address">東京都渋谷区上原1丁目</p>
// </div>
// </div>
// <p class="pic_object"><img src="/shared/images/dummy/pic_search.jpg" alt="物件画像" width="170" /></p>
// </a>
// </div>
// <table class="mod_table mod_table_col">
// <tr>
// <th scope="col" class="mod_check">選択</th>
// <th scope="col">部屋階</th>
// <th scope="col">間取り図</th>
// <th scope="col">賃料／管理費</th>
// <th scope="col">敷金／礼金</th>
// <th scope="col">間取り／面積</th>
// <th scope="col">キャンペーン<br />ほか</th>
// <th scope="col">検討リスト</th>
// </tr>
// <tr class="flag_picture">
// <td rowspan="2" class="mod_check mod_check_green"><input type="checkbox" name="" id="" value="" /></td>
// <td>
// <p>1階</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/img_madori.jpg" alt="間取り図" width="48" /></a></td>
// <td>
// <p><span class="price">10.5</span>万円</p>
// <p>4,000円</p></td>
// <td>
// <p>1ヶ月／</p>
// <p>10,000円</p></td>
// <td>
// <p>2LDK</p>
// <p>32.29m&sup2;</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/icn_campaign.jpg" alt="" width="50" height="50" class="mod_icn_campaign" /></a></td>
// <td><a href="javascript: void(0);" class="mod_icn_star">お気に入りに追加</a></td>
// </tr>
// <tr class="tr_under">
// <td colspan="7">
// <ul class="mod_list_icn_equipment mod_list_icn_equipment6">
// <li class="tag"><img src="/shared/images/icon/equipment/icn_picture.png" alt="写真満載" width="100" height="31" /></li>
// </ul>
// <div class="box_btn">
// <a href="#dummy" class="mod_btn_all_s mod_btn_all_green">問い合わせ</a>
// <a href="#dummy" target="_blank" class="mod_btn_s mod_btn_blue">詳細</a>
// </div></td>
// </tr>
// </table>
// </article>
//
// Styleguide 4.4

/* --------------------------
	* mod_box_tab_room
* -------------------------- */
.mod_box_tab_room {
	margin-top: 60px;

	.txt_type {
		padding: 9px 26px 4px 22px;
		@include border-top-left-radius($radius);
		@include border-top-right-radius($radius);
		@include inline-block;
		position: absolute;
		left: -2px;
		top: -36px;
		color: #fff;
		background-color: $bgColorBlue;
	}

	.box_head_tab_room {
		line-height: $lineHeight;
		@include clearfix;

		a {
			position: relative;
			display: block;
			color: $textColor;
			text-decoration: none;
			cursor: pointer;
			@include clearfix;
		}

		.box_info {
			float: right;
			width: 750px;
		}

		.name {
			margin-top: 14px;
			font-size: 24px;
			font-weight: bold;
		}

		.info {
			margin-top: 10px;
			margin-bottom: 20px;
			font-size: $fontSizeL;
			font-weight: bold;

			span {
				margin-right: 0.3em;
			}
		}

		.box_access, .box_address {
			float: left;
			width: 350px;
		}

		.ttl_info {
			margin-right: 8px;
			padding-top: 2px;
			padding-bottom: 1px;
			float: left;
			width: 80px;
			background-color: $bgColorGray;
			text-align: center;
		}

		.box_access {
			margin-right: 30px;
		}

		.list_access, .address {
			overflow: hidden;
		}

		.list_access li, .address {
			margin-top: 2px;
		}

		.pic_object {
			padding: 20px 4px;
			border: 1px solid #c4c4c4;
			@include border-radius(4px);
			float: left;
			width: 178px;
			text-align: center;
		}
	}

	.mod_table_col {
		.mod_delete {
			width: 110px;
		}

		.mod_btn_all_green {
			padding-top: 7px;
			padding-bottom: 5px;
			width: 119px;
			font-size: $fontSizeL;
		}

		.mod_btn_all_black {
			padding-top: 8px;
			padding-bottom: 6px;
			width: 90px;
			font-size: $fontSize;
		}

		.mod_btn_blue {
			margin-left: 5px;
			width: 115px;
		}
	}
}


// ページャー
//
// .mod_pager - sample
//
// Markup:
// <ul class="mod_pager">
// <li class="prev"><span class="mod_btn_s mod_btn_disabled">前へ</span></li>
// <li class="current">1</li>
// <li><a href="#dummy">2</a></li>
// <li><a href="#dummy">3</a></li>
// <li><a href="#dummy">4</a></li>
// <li><a href="#dummy">5</a></li>
// <li>...</li>
// <li><a href="#dummy">15</a></li>
// <li class="next"><a href="#dummy" class="mod_btn_s mod_btn_blue">次へ</a></li>
// </ul>
//
// Styleguide 4.5

/* --------------------------
	* mod_pager
* -------------------------- */
.mod_pager {
	margin: 20px auto;
	position: relative;
	line-height: $lineHeightS;
	font-size: 0px;
	text-align: center;

	.prev, .next {
		padding: 0;
		width: 64px;
	}

	.prev {
		margin-right: 16px;
	}

	.next {
		margin-left: 16px;
	}

	.current {
		color: $textColorUsuPink;
	}

	li {
		padding: 0 4px;
		@include inline-block;
		color: $textColorHover;
		font-size: $fontSizeL;
		font-weight: bold;
	}

	a {
		color: $textColorHover;
	}
}


// まとめて問い合わせ→最近見た物件など
//
// .mod_box_section.mod_box_inquiry_all - sample
//
// Markup:
// <div class="mod_box_section mod_box_inquiry_all">
// <p class="mod_check mod_check_green"><label><input name="" type="checkbox" id="" value="" />すべて選択する</label></p>
// <p class="button">
// 選択した物件を
// <a href="javascript: void(0);" class="mod_btn_all mod_btn_all_green">まとめて問い合わせ</a>
// ※20件まで可能
// </p>
// </div>
//
// Styleguide 4.6

/* --------------------------
	* mod_box_inquiry_all
* -------------------------- */
.mod_box_inquiry_all {
	margin-top: 30px;
	margin-bottom: 0px;
	padding: 0;
	position: relative;
	height: 75px;
	font-size: $fontSizeL;

	.mod_check_green {
		margin-right: 20px;
		padding-top: 24px;
		padding-bottom: 23px;
		padding-left: 30px;
		border-right: 2px solid $bgColorMain;
		@include border-top-left-radius($radius);
		@include border-bottom-left-radius($radius);
		float: left;
		width: 298px - 30;
		background-color: $bgColorUsuGreen;

		.mod_checkbox {
			margin-right: 14px;
		}
	}

	.button {
		padding-top: 18px;
		padding-bottom: 14px;
		overflow: hidden;
	}

	.mod_btn_all {
		margin: 0 12px;
		margin-top: -4px;
		width: 236px;
		vertical-align: middle;
		font-size: 18px;

		&:hover {
			color: #fff;
		}
	}
}


